﻿<!--<div class="top-gray-bubbles">
    <div class="top-gray-bubbles-inner">
        
        <div class="top-gray-bubbles-inner-left">
            
        </div>
        <div class="clear">&nbsp;</div>
    </div>
    <div class="top-gray-bubbles-inner">
       
        <div class="top-gray-bubbles-inner-left">
            
        </div>
        <div class="clear">&nbsp;</div>
    </div>
    <div class="top-gray-bubbles-inner">
        
        <div class="top-gray-bubbles-inner-left">
            
        </div>
        <div class="clear">&nbsp;</div>
    </div>
    <div class="top-gray-bubbles-inner" style="margin-right: 0;">
        
        
        <div class="clear">&nbsp;</div>
    </div>
</div>
<div class="clear">&nbsp;</div><br /><br />-->


<div class="row-fluid">
    <div class="col-md-3">
        <div class="sidebar-table-left no-border" style="width: 80px;">
            <div class="gray-number-bubble-2" style="font-size: 26px;">
                {{ esgThemeOverall.overall.weight.weight * 100 | number:0 }}%
            </div>
        </div>
        <div class="sidebar-table-right no-border" style="width: 140px; padding-top: 27px;">
            <strong class="title-black-border" ng-switch="esgThemeOverall.overall.theme">
                    <span ng-switch-when="1">Environment Weight</span>
                    <span ng-switch-when="2">Social Weight</span>
                    <span ng-switch-when="3">Governance Weight</span>
            </strong>
        </div>
        <div class="clear"></div>
    </div>
    <div class="col-md-3">
        <div class="sidebar-table-left no-border" style="width: 90px;">
            <div class="gray-number-bubble-2">
                {{ esgThemeOverall.overall.overall.score | number:0 }}
            </div>
        </div>
        <div class="sidebar-table-right no-border" style="width: 135px; padding-top: 19px;">
            <div class="title-black-border" ng-switch="esgThemeOverall.overall.theme">
                <span ng-switch-when="1">Environment Score</span>
                <span ng-switch-when="2">Social Score</span>
                <span ng-switch-when="3">Governance Score</span>
            </div> 
            <ul class="esg-ratings">
                <li class="active ng-binding">{{ esgThemeOverall.overall_overall_esgPositionName }}</li>
            </ul>
        </div>
        <div class="clear"></div>
    </div>
    <div class="col-md-3">
        <div class="sidebar-table-left no-border">
            <div class="gray-number-bubble" style="font-size: 26px;">
                {{ esgThemeOverall.overall.relative.comparativeGroupRank }}
                <div style="font-size: 18px; padding: 3px 0;">out of</div>
                {{ esgThemeOverall.overall.relative.comparativeGroupSize }}
            </div>
        </div>
        <div class="sidebar-table-right no-border" style="width: 125px; padding-top: 27px;">
            <strong>Relative Position</strong>
        </div>
        <div class="clear"></div>
    </div>
    <div class="col-md-3">
        <div class="sidebar-table-left no-border">
            <div class="gray-number-bubble-2">
                {{ esgThemeOverall.overall.percentile.comparativeGroupPercentileRank }}<sup style="font-size: 11px; top: -14px;" class="ng-binding">th</sup>
            </div>
        </div>
        <div class="sidebar-table-right no-border" style="width: 125px;">
            <div class="top-gray-bubbles-inner-left" style="padding-top: 27px;">
                <strong>Percentile</strong>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <div class="clear">&nbsp;</div><br />
</div>